﻿@page "/tests/components"
@using System.Collections.ObjectModel

<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Select List</CardTitle>
            </CardHeader>
            <CardBody>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldLabel ColumnSize="ColumnSize.Is2">Select Value</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is10">
                        <SelectList TItem="Country"
                                    TValue="string"
                                    Data="@Countries"
                                    TextField="@(( item ) => item.Name)"
                                    ValueField="@((item) => item.Iso)"
                                    @bind-SelectedValue="@selectedListValue"
                                    DefaultItemText="Choose your country" />
                    </FieldBody>
                </Field>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldBody ColumnSize="ColumnSize.Is10.Is2.WithOffset">
                        Selected value: @selectedListValue
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Dropdown List</CardTitle>
            </CardHeader>
            <CardBody>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldLabel ColumnSize="ColumnSize.Is2">Select Value</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is10">
                        <DropdownList TItem="Country"
                                      TValue="string"
                                      Data="@Countries"
                                      TextField="@(( item ) => item.Name)"
                                      ValueField="@((item) => item.Iso)"
                                      @bind-SelectedValue="@selectedDropValue"
                                      Color="Color.Primary"
                                      MaxMenuHeight="200px"  >
                            Select item
                        </DropdownList>
                    </FieldBody>
                </Field>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldBody ColumnSize="ColumnSize.Is10.Is2.WithOffset">
                        Selected value: @selectedDropValue
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Autocomplete</CardTitle>
            </CardHeader>
            <CardBody>
                <Field>
                    <FieldBody>
                        <Check @bind-Checked="@autocompleteFreeTyping">FreeTyping</Check>
                    </FieldBody>
                </Field>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldLabel ColumnSize="ColumnSize.Is2">Select Value</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is10">
                        <Autocomplete TItem="Country"
                                      TValue="string"
                                      Data="@Countries"
                                      TextField="@(( item ) => item.Name)"
                                      ValueField="@((item) => item.Iso)"
                                      @bind-SelectedValue="selectedAutoCompleteSearchValue"
                                      @bind-SelectedText="selectedAutoCompleteText"
                                      Placeholder="Search..."
                                      Filter="AutocompleteFilter.StartsWith"
                                      FreeTyping="autocompleteFreeTyping"
                                      CustomFilter="@(( item, searchValue ) => item.Name.IndexOf( searchValue, 0, StringComparison.CurrentCultureIgnoreCase ) >= 0 )">
                            <NotFoundContent> Sorry... @context was not found! :( </NotFoundContent>
                            <ItemContent>
                                <Div Flex="Flex.InlineFlex.JustifyContent.Between" Width="Width.Is100">
                                    <Heading Margin="Margin.Is2.FromBottom">@context.Value</Heading>
                                    <Small>@context.Item.Capital</Small>
                                </Div>
                                <Paragraph Margin="Margin.Is2.FromBottom">@context.Text</Paragraph>
                            </ItemContent>
                        </Autocomplete>
                    </FieldBody>
                </Field>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldBody ColumnSize="ColumnSize.Is10.Is2.WithOffset">
                        Selected search value: @selectedAutoCompleteSearchValue
                    </FieldBody>
                    <FieldBody ColumnSize="ColumnSize.Is10.Is2.WithOffset">
                        Selected text value: @selectedAutoCompleteText
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Autocomplete Multiple Selection</CardTitle>
            </CardHeader>
            <CardBody>
                <Field>
                    <FieldBody>
                        <Check @bind-Checked="@multipleAutocompleteFreeTyping">FreeTyping</Check>
                    </FieldBody>
                </Field>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldLabel ColumnSize="ColumnSize.Is2">Select Values</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is10">
                        <Autocomplete TItem="Country"
                                      TValue="string"
                                      Data="@Countries"
                                      TextField="@(( item ) => item.Name)"
                                      ValueField="@((item) => item.Iso)"
                                      Placeholder="Search..."
                                      Multiple
                                      FreeTyping="multipleAutocompleteFreeTyping"
                                      CloseOnSelection="false"
                                      MinLength="1"
                                      @bind-SelectedValues="multipleSelectionData"
                                      @bind-SelectedTexts="multipleSelectionTexts">
                        </Autocomplete>
                    </FieldBody>
                </Field>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldBody ColumnSize="ColumnSize.Is10.Is2.WithOffset">
                        Selected Values: @string.Join(',', multipleSelectionData)
                    </FieldBody>
                    <FieldBody ColumnSize="ColumnSize.Is10.Is2.WithOffset">
                        Selected Texts: @string.Join(',', multipleSelectionTexts)
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>


    <Column ColumnSize="ColumnSize.IsFull.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Repeater</CardTitle>
            </CardHeader>
            <CardBody>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldLabel ColumnSize="ColumnSize.Is6">
                        <Buttons>
                            <Button Color="Color.Primary" Clicked="@(() => items.Add( items.Count + 1 ) )">Add</Button>
                            <Button Color="Color.Warning" Disabled="@(items.Count == 0)" Clicked="@(() => items.RemoveAt( items.Count - 1 ))">Remove</Button>
                            <Button Color="Color.Danger" Clicked="@(() => items.Clear())">Clear</Button>
                            <Button Color="Color.Secondary" Disabled="@(items.Count == 0)" Clicked="ShuffleList">Shuffle</Button>
                        </Buttons>
                    </FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is6">
                        <Dropdown>
                            <DropdownToggle Color="Color.Primary">
                                Updating dropdown
                            </DropdownToggle>
                            <DropdownMenu>
                                <Repeater Items="@items">
                                    <DropdownItem>@context</DropdownItem>
                                </Repeater>
                            </DropdownMenu>
                        </Dropdown>
                    </FieldBody>
                </Field>
                <Field Horizontal="true" JustifyContent="JustifyContent.End">
                    <FieldBody ColumnSize="ColumnSize.Is12">
                        <ul>
                            <Repeater Items="@items">
                                <li style="@GetColor( context )">@context</li>
                            </Repeater>
                        </ul>
                    </FieldBody>
                </Field>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnMobile.IsHalf.OnTablet">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>ListView</CardTitle>
            </CardHeader>
            <CardBody>
                <ListView TItem="Country"
                          Data="@Countries"
                          @bind-SelectedItem="@selectedListViewItem"
                          TextField="@((item) => item.Name)"
                          Mode="ListGroupMode.Selectable">
                </ListView>
                <Paragraph Margin="Margin.Is3.FromTop">
                    Selected Item Text: @selectedListViewItem?.Name
                </Paragraph>
            </CardBody>
        </Card>
    </Column>
</Row>

@code {
    [Inject]
    public CountryData CountryData { get; set; }
    public IEnumerable<Country> Countries;

    private string selectedAutoCompleteSearchValue { get; set; }
    private string selectedAutoCompleteText { get; set; }
    private bool autocompleteFreeTyping = false;

    private List<string> multipleSelectionData;
    private List<string> multipleSelectionTexts = new();
    private bool multipleAutocompleteFreeTyping = false;


    private string selectedListValue { get; set; }
    private string selectedDropValue { get; set; } = "2";

    private Country selectedListViewItem { get; set; }

    private ObservableCollection<int> items { get; } = new( Enumerable.Range( 1, 4 ) );
    private Random random = new();

    protected override async Task OnInitializedAsync()
    {
        Countries = await CountryData.GetDataAsync();
        multipleSelectionData = new List<string>() { Countries.ElementAt( 1 ).Iso.ToString(), Countries.ElementAt( 3 ).Iso.ToString() };
        await base.OnInitializedAsync();
    }

    private void ShuffleList()
    {
        var maxIndex = items.Count - 1;

        if ( maxIndex == -1 )
            return;

        var orgPos = random.Next( maxIndex );
        var newPos = random.Next( maxIndex );

        items.Move( orgPos, newPos );
    }

    private static string GetColor( int number )
    {
        const string letters = "0123456789ABCDEF";

        var color = "";

        for ( var i = 0; i < 6; i++ )
        {
            color += letters[( 3 * number + i ) % letters.Length];
        }

        return $"color: #{color}";
    }
}